<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    .box {
        width: 560px;
        height: 100px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
    }
    
    ul {
        width: 990px;
        position: absolute;
        left: 0;
        font-size: 0;
    }
    
    .box li {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: #ccc;
        margin-right: 10px;
        text-align: center;
        line-height: 100px;
        font-size: 12px;
    }
    
    span.prev {
        height: 100px;
        width: 10px;
        left: 0;
        position: absolute;
        background: blue;
    }
    
    span.next {
        height: 100px;
        width: 10px;
        right: 0;
        position: absolute;
        background: blue;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <span class="prev"></span>
        <span class="next"></span>
    </div>
</body>
<script>
    $(function() {
        var w = $(".box").find("li").outerWidth(true);
        var len = $(".box").find("li").length;
        lock = true;
        var n = 0;

        function scroll(n) {
            $(".box ul").animate({
                "left": -n * (w + 10)
            }, 500, function() {
                lock = true;
            })
        }
        $(".next").bind("click", function() {
            if (lock) {
                if ((len - 5) * w >= Math.abs(parseInt($(".box ul").css("left")))) {
                    n++;
                    lock = false;
                    scroll(n);
                }
            }
        });
        $(".prev").bind("click", function() {
            if (lock) {
                if (Math.abs(parseInt($(".box ul").css("left"))) > 0) {
                    n--;
                    lock = false;
                    scroll(n);
                }
            }
        })
    })
</script>

</html>